<template>
  <div>
    <div v-if="state !== 'detail'" class="operation-group">
      <el-upload
        multiple
        :show-file-list="false"
        :action="uploadUrl"
        :on-error="onError"
        :on-progress="onProgress"
        :before-upload="beforeUpload"
        :on-success="InventorySuccess"
        :headers="headers"
        :accept="getUploadFileRules.map(n => n.toLowerCase()).join(',')"
      >
        <el-button plain type="single-number">上传盘点明细表</el-button>
      </el-upload>
      <el-upload
        multiple
        :show-file-list="false"
        :action="uploadUrl"
        :on-error="onError"
        :on-progress="onProgress"
        :before-upload="beforeUpload"
        :on-success="otherSuccess"
        :headers="headers"
        :accept="getUploadFileRules.map(n => n.toLowerCase()).join(',')"
      >
        <el-button plain type="single-number">上传附件</el-button>
      </el-upload>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        :data="fileList"
        :style="{ 'margin-top': state === 'detail' ? '41px' : 0 }"
        border
      >
        <el-table-column
          :show-overflow-tooltip="true"
          label="序号"
          type="index"
          min-width="20%"
          height="36px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileName"
          label="文件名称"
          min-width="100%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileSize"
          label="文件大小"
          min-width="70%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="附件说明"
          min-width="70%"
        >
          <template slot-scope="{ row }">
            <span v-if="state === 'detail'">{{ row.fileDesc }}</span>
            <el-input
              v-else
              placeholder="请输入附件说明"
              maxlength="2000"
              v-model="row.fileDesc"
              @blur="handleBlur(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="createTime"
          label="上传时间"
          min-width="90%"
        >
          <template slot-scope="{ row }">
            <span>{{
              row.uploadTime || row.createTime || row.createTimeStr
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileType"
          label="附件类型"
          min-width="70%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="操作"
          align="left"
          appendixInfor.vue
          min-width="70%"
        >
          <template slot-scope="{ row, $index }">
            <span
              v-if="state !== 'detail'"
              style="color: #0089ef; cursor: pointer"
              @click="deleteAppend(row, $index)"
              >删除</span
            >
            <span
              v-else
              style="color: #0089ef; cursor: pointer"
              @click="downLoad(row)"
              >下载</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { generateUUID } from "@/basa/utils";
// import { cloneDeep } from "lodash";
import UploadInfo from "@/basa/mixins/uploadInfo";

export default {
  name: "uploadInfo",
  mixins: [UploadInfo],
  model: {
    prop: "parentData",
    event: "uploadSuccess"
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    state: {
      type: String,
      default: ""
    },
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      inventoryDetailFiles: [], // 盘点明细
      inventoryOtherFiles: [] // 其他
    };
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      if (["edit", "detail"].includes(this.state)) {
        this.inventoryDetailFiles = this.toList(
          this.detail.inventoryDetailFiles,
          "盘点明细"
        );
        this.inventoryOtherFiles = this.toList(
          this.detail.inventoryOtherFiles,
          "其他"
        );
        this.fileList = [
          ...this.inventoryDetailFiles,
          ...this.inventoryOtherFiles
        ];
      }
    },

    toList(arr, fileType) {
      return arr.map(n => ({
        ...n,
        onlyId: generateUUID(),
        fileSize: String(n.fileSize).endsWith("kb")
          ? n.fileSize
          : Math.round(Number(n.fileSize) / 1024) + "kb",
        fileType
      }));
    },
    handleSubmit() {
      return new Promise((resolve, reject) => {
        if (!this.inventoryDetailFiles.length) {
          reject("third");
          this.$showErrorMessage("明细表不能为空");
        } else {
          resolve(this.inventoryDetailFiles);
        }
      });
    },

    deleteAppend(row) {
      const state =
        row.fileType === "其他"
          ? "inventoryOtherFiles"
          : "inventoryDetailFiles";

      const index = this[state].findIndex(_ => _.onlyId === row.onlyId);
      this[state].splice(index, 1);

      this.inventoryDetailFiles = this.toList(
        this.inventoryDetailFiles,
        "盘点明细"
      );
      this.inventoryOtherFiles = this.toList(this.inventoryOtherFiles, "其他");
      this.fileList = [
        ...this.inventoryDetailFiles,
        ...this.inventoryOtherFiles
      ];
    },

    onSuccess({ data }, fileObj) {
      this.$message.success("附件上传成功");
      this.uploadLoading.close();
      let [{ uploadId, fileName, fileSize, createTime }] = data;
      const obj = {
        uploadId,
        fileName,
        createTime,
        fileDesc: "",
        fileType: fileObj.fileType,
        onlyId: generateUUID(),
        fileSize: Math.round(fileSize / 1024) + "kb"
      };

      this.fileList.push(obj);
      this[fileObj.fileArr].push(obj);
    },

    InventorySuccess(response) {
      this.onSuccess(response, {
        fileArr: "inventoryDetailFiles",
        fileType: "盘点明细表"
      });
    },

    otherSuccess(response) {
      this.onSuccess(response, {
        fileArr: "inventoryOtherFiles",
        fileType: "其他"
      });
    },

    handleBlur(row) {}
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table {
    margin-bottom: 20px;
    width: 100%;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}

.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  div:first-child {
    margin-right: 10px;
  }
}
</style>
